<template>
  <div>
    <el-button size="small" type="primary" class="mt-2 ml-2" @click="addRow">新增</el-button>
    <el-table :data="modelValue" height="272px" size="small" border style="margin-top: 10px">
      <el-table-column align="center" label="字段名" min-width="100" prop="name">
        <template #default="scope">
          <el-input v-model="scope.row.name" :disabled="!!scope.row.key" size="small"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="字段备注" min-width="100" prop="comment">
        <template #default="scope">
          <el-input v-model="scope.row.comment" :disabled="!!scope.row.key" size="small"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="字段类型" min-width="80" prop="dataType">
        <template #default="scope">
          <el-select v-model="scope.row.dataType"
                     :disabled="!!scope.row.key"
                     size="small"
                     placeholder=""
                     @change="(value) => dataTypeChange(value, scope.row)">
            <el-option v-for="item in DATA_TABLE_FIELD_TYPE"
                       :key="item.value"
                       :disabled="!!item.disabled"
                       :label="item.label"
                       :value="item.value"/>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" label="字段长度" width="140" prop="dataLength">
        <template #default="scope">
          <el-input-number v-model="scope.row.dataLength"
                           :controls="false"
                           :disabled="!!scope.row.key || !['decimal'].includes(scope.row.dataType)"
                           :min="0"
                           size="small"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="小数点" width="140" prop="decimalLength">
        <template #default="scope">
          <el-input-number v-model="scope.row.decimalLength"
                           :controls="false"
                           :disabled="!!scope.row.key || !['decimal'].includes(scope.row.dataType)"
                           :min="0"
                           size="small"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="默认值" min-width="100" prop="dataDefault">
        <template #default="scope">
          <el-input v-model="scope.row.dataDefault" :disabled="!!scope.row.key" size="small"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="允许空值" width="70" prop="ifNull">
        <template #default="scope">
          <el-checkbox v-model="scope.row.ifNull"
                       :disabled="!!scope.row.key"
                       true-value="Yes"
                       false-value="No"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="70">
        <template #default="scope">
          <el-button :disabled="!!scope.row.key"
                     link type="primary" size="small"
                     @click.native.prevent="deleteRow(scope.$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
/////////////////////////////////   外部依赖导入    //////////////////////////
import {onMounted, onUnmounted, ref, reactive, nextTick, onBeforeUnmount, defineProps, defineEmits, computed} from 'vue'
import {useRouter} from 'vue-router';
import defaultLogo from "@/assets/images/default-logo.png";
import defaultAvatar from "@/assets/images/default-avatar.jpg";
import {$localStorage} from "@/utils/application-storage.js";
import $apiService from "@/axios/api.js";

import BpmnModeler from 'bpmn-js/lib/Modeler';
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
import BpmnColorPickerModule from 'bpmn-js-color-picker';
import PaletteModule from 'bpmn-js/lib/features/palette';
import ModelingModule from 'bpmn-js/lib/features/modeling';
import "bpmn-js/dist/assets/diagram-js.css"
import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css"
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css"
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css"
import DefaultEmptyXML from "@/components/bpmn/defaultEmptyXML.js";
import Epms2AceEditor from "@/components/epms2-ace-editor.vue";
import WorkflowEditorChild1 from "@/views/WorkflowMnt/component/WorkflowEditorChild1.vue";
import WorkflowEditorChildBpmnStartEvent from "@/views/WorkflowMnt/component/WorkflowEditorChildBpmnStartEvent.vue";
import WorkflowEditorChildBpmnTask from "@/views/WorkflowMnt/component/WorkflowEditorChildBpmnTask.vue";
import WorkflowEditorChildBpmnEndEvent from "@/views/WorkflowMnt/component/WorkflowEditorChildBpmnEndEvent.vue";
import WorkflowEditorChildBpmnSequenceFlowDrawer from "@/views/WorkflowMnt/component/WorkflowEditorChildBpmnSequenceFlowDrawer.vue";
import {APP_MENU_OPEN_METHOD, APP_MENU_TARGET_TYPE, DATA_TABLE_FIELD_TYPE, ENABLE_OPTIONS} from "@/utils/constant.js";


/////////////////////////////////   组件参数    //////////////////////////
// 1. 定义 props 和 emits
const props = defineProps({
  modelValue: {
    type: Array,
    required: true,
    default: () => []
  },
});
const emits = defineEmits(['update:modelValue',]);
// 2. 创建计算属性实现双向绑定
const localValue = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emits('update:modelValue', value);
  },
});
/////////////////////////////////   私有变量定义    //////////////////////////
const $router = useRouter();
const visible = ref(false);
const tenantInfo = ref({
  id: "",
  logo: defaultLogo,
  tenantCode: '',
  systemName: ''
})
const myProfile = ref({
  avatarUrl: defaultAvatar,
  realName: ''
})
const dialogForm = ref({
  isDefaultView: "No",
  tableFieldDataAuthConfigCreation: "",
})
const dialogFormRules = ref({
  formName: [{required: true, message: '请输入表单名称', trigger: 'blur'}],
  tableCode: [{required: true, message: '请输入表单编码', trigger: 'blur'}],
  viewCode: [{required: true, message: '请输入默认视图编码', trigger: 'change'}],
  describe: [{required: true, message: '请输入表描述', trigger: 'change'}],
})

const bpmnStartEventDrawerRef = ref({
  show: () => {
  }
});
const bpmnSequenceFlowDrawerRef = ref({
  show: () => {
  }
});
const bpmnTaskDrawerRef = ref({
  show: () => {
  }
});
const bpmnEndEventDrawerRef = ref({
  show: () => {
  }
});
const bpmnIntermediateThrowEventDrawerRef = ref({
  show: () => {
  }
});

/////////////////////////////////   生命周期方法 //////////////////////////
onMounted(() => {
  tenantInfo.value = $localStorage.getTenantInfo()
  myProfile.value = $localStorage.getMyProfile()
});
onBeforeUnmount(() => {

})
onUnmounted(() => {
});
/////////////////////////////////   页面方法    //////////////////////////
const show = async (data) => {
  visible.value = true
  if (data) dialogForm.value = data
  await nextTick();
  // initBpmnModeler()
}

const addRow = () => {
  localValue.value.push({
    key: '',
    name: '',
    comment: '',
    dataType: 'text',
    dataDefault: null,
    ifNull: 'Yes',
    listShow: true,
    formShow: true,
    controlType: 'input',
    queryShowType: 'input',
    queryMode: 'single',
  })
}
const dataTypeChange = (value, row) => {
  delete row.dataLength
  delete row.decimalLength
  if (value === 'int4') row.dataLength = 32
  if (value === 'int8') row.dataLength = 64
}
const deleteRow = (index) => {
  localValue.value.splice(index, 1)
}
const ddd = () => {
}
const eeee = () => {
}
/////////////////////////////////   暴露内部方法，让父组件可以访问    //////////////////////////
defineExpose({
  show
});
</script>

<style scoped>

:deep(.el-tabs__content) {
  padding: 0;
}
</style>
